<%--
  Created by IntelliJ IDEA.
  User: dengry
  Date: 15/3/24
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>

    <style>
        * {
            font: 12px/1.75 Arial, "宋体";
        }

        form#regform label {
            width: 100px;
            display: inline-block;
            vertical-align: top;
        }

        #regform label.error {
            background: url("resources/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            margin-left: 10px;
            width: auto;
            display: inline;
        }

        #regform label.success {
            background: url("resources/images/checked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            margin-left: 10px;
            width: auto;
            display: inline;
        }

        input.inputSingleLine {
            border: 1px solid #c4c4c4;
            height: 22px;
            width: 200px;
        }

    </style>

    <script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="resources/js/jquery.validate.min.js"></script>
    <script>
        jQuery.validator.addMethod("mobile", function (value, element) {
            var length = value.length;
            var mobile = /^1[358]\d{9}$/
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");
        $().ready(function () {
            $("#regform").validate({
                rules: {
                    username: {
                        required: true,
                        minlength: 4,
                        remote: {
                            url: "checkNameIsUse",
                            type: "post",
                            dataType: "json",
                            username: function () {
                                return $("#username").val();
                            }
                        }
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    repass: {
                        required: true,
                        equalTo: "#password"
                    },
                    phone: {
                        required: true,
                        mobile: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    name: {
                        required: true
                    },
                    credentialsNum: {
                        required: true,
                        minlength: 6
                    },
                    verifycode: {
                        required: true,
                        remote: {
                            url: "checkVerifycode",
                            type: "post",
                            dataType: "json",
                            verifycode: function () {
                                return $("#verifycode").val();
                            }
                        }
                    }
                }, messages: {
                    username: {
                        required: "请输入用户名",
                        minlength: "用户名不能小于{0}位",
                        remote: "该用户名已被注册"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码不能小于{0}位"
                    },
                    repass: {
                        required: "请输入确认密码",
                        equalTo: "两次输入密码不一致"
                    },
                    phone: {
                        required: "请输入手机号码"
                    },
                    email: {
                        required: "请输入邮箱",
                        email: "邮箱格式错误"
                    },
                    name: {
                        required: "请输入姓名"
                    },
                    credentialsNum: {
                        required: "请输入证件号码",
                        minlength: "密码不能小于{0}位"
                    },
                    verifycode: {
                        required: "请输入验证码",
                        remote: "验证码不匹配"
                    }
                },
                errorElement: "label", //可以用其他标签，记住把样式也对应修改
                success: function (label) {
                    //label指向上面那个错误提示信息标签em
                    label.text(" ")				//清空错误提示消息
                            .addClass("success");	//加上自定义的success类
                }
            });
        });

        function changeCode() {
            document.getElementById("rc").src = "getRandomCode?t=" + new Date().getTime();
        }
    </script>
</head>
<body>
<div style="margin: 0 auto;width: 800px">
    <form id="regform" method="post" action="addUser">
        <p>
            <label for="username">姓名</label>
            <input id="username" name="username" class="inputSingleLine"/>
        </p>

        <p>
            <label for="password">密码</label>
            <input id="password" type="password" name="password" class="inputSingleLine"/>
        </p>

        <p>
            <label for="repass">确认密码</label>
            <input id="repass" type="password" name="repass" class="inputSingleLine"/>
        </p>

        <p>
            <label for="phone">手机号码</label>
            <input id="phone" name="phone" class="inputSingleLine"/>
        </p>

        <p>
            <label for="email">电子邮箱</label>
            <input id="email" name="email" class="inputSingleLine"/>
        </p>

        <p>
            <label for="name">姓名</label>
            <input id="name" name="name" class="inputSingleLine"/>
        </p>

        <p>
            <label for="credentialsType">证件类型</label>
            <select id="credentialsType" style="width: 100px" name="credentialsType">
                <option value="军官证">军官证</option>
                <option selected value="身份证">身份证</option>
            </select>
        </p>
        <p>
            <label for="credentialsnum">证件号码</label>
            <input id="credentialsNum" name="credentialsNum" class="inputSingleLine"/>
        </p>


        <p>
            <label for="verifycode" style="float: left">验证码</label>
            <input id="verifycode" name="verifycode" class="inputSingleLine" style="float: left;margin-left: 3px"/>
            <img src="getRandomCode" id="rc" onclick="changeCode()" style="margin-left: 5px"/>
            
        </p>


        <p>
            <label for="submit"></label>
            <input id="submit" type="submit" value="提交"/>
        </p>

    </form>
</div>
</body>
</html>
